/* 表单聚焦以及指定元素样式 */
.css1 {
  .main {
    width: 400px;
    padding: 10px;
    div {
      margin-top: 15px;
    }
    .form-block {
      padding: 10px;
      width: 80%;
      margin: 0 auto;
      &:focus-within {
        /* 是一个CSS 伪类，表示一个元素获得焦点，
        或者该元素的后代元素获得焦点。当一个元素获得焦点时，
        只有该元素的后代元素才会获得焦点。 
        例如，如果一个按钮元素获得了焦点，
        那么只有该按钮的子元素（如输入框）才会获得焦点。*/
        background-color: #409eff35;
      }
      .label {
        .txt {
          padding: 6px 12px;
          margin-left: 15px;
          border-radius: 4px;
          border: 1px solid #999;
          &:focus {
            border: 1px solid#409eff !important;
          }
        }
      }
      /* 必填项 */
      .label span:has(+ input[required])::after {
        content: "*";
        color: red;
      }
    }
  }
}

/* 首字大写以及鼠标选中样式 */
.css2 {
  .main {
    width: 400px;
    .text {
      /* ::first-letter 选择第一个元素*/
      &::first-letter {
        font-size: 2em;
        font-weight: bold;
        text-transform: uppercase;
        float: left;
        line-height: 1;
        margin-right: 10px;
      }
      /* ::selection 伪类用于控制选中的样式 */
      &::selection {
        background: #ccc;
        color: red;
        text-decoration: underline;
      }
    }
  }
}

/* 背景渐变动画以及中心点旋转渐变 */
.css3 {
  .main {
    background-color: #000;
    width: calc(100% - 200px);
  }
  .mainBackground {
    --direc: 0deg;
    width: 200px;
    margin: 10px auto;
    background: linear-gradient(
      var(--direc),
      #00ffff 15%,
      #1fabed 20%,
      #0000ff 40%,
      #6e2ce8 50%,
      #8e45e8 70%,
      #caf245 100%
    );
    position: relative;
    animation: spin 3s linear infinite;
    &::after {
      content: "";
      position: absolute;
      background: inherit;
      border-radius: inherit;
      z-index: 1;
      inset: 0px;
      filter: blur(20px);
    }
    &::before {
      content: "";
      width: 192px;
      height: 342px;
      position: absolute;
      background: #000;
      border-radius: inherit;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .div1 {
    height: 350px;
    border-radius: 14px;
  }
  .div2 {
    height: 200px;
    border-radius: 50%;
    &::before {
      content: "";
      width: 192px;
      height: 192px;
      position: absolute;
      background: #000;
      border-radius: inherit;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .div3 {
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
      #00ffff 15%,
      #1fabed 20%,
      #0000ff 40%,
      #6e2ce8 50%,
      #8e45e8 70%,
      #caf245 100%
    );
    transform: rotateZ(var(--direc));
    &::before {
      content: "";
      width: 192px;
      height: 192px;
      position: absolute;
      background: #000;
      border-radius: inherit;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

/* 背景阴影以及背景颜色反转 */
.css4 {
  .main {
    height: 420px;
    overflow-y: scroll;
    width: 100%;
    .demo1{
      text-align: center;
      .demo1Img{
        --direc: 0deg;
        filter: drop-shadow(0px 0px 6px rgb(255, 208, 75))
                hue-rotate(var(--direc));
        // filter: grayscale(1);
        /* 函数将改变输入图像灰度。
          amount 的值定义了转换的比例。
          值为 100% 则完全转为灰度图像，值为 0% 图像无变化。
          值在 0% 到 100% 之间，则是效果的线性乘数。
          若未设置值，默认是 0 */
        animation: hueRotateImg 5s linear infinite;
      }
    }

    .demo2{
      width: 100%;
      height: 300px;
      background: #000;
      position: relative;
      .card{
        width: 400px;
        height: 200px;
        background: rgba($color: #fff, $alpha: 0.25);
        backdrop-filter: blur(5px);
        color: #fff;
        position: absolute;
        border:2px solid rgba($color: #fff, $alpha: 0.1);
        border-radius: 16px;
        padding: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

/* 图片裁剪：旋转效果 polygon（多边形）*/
.css5 {
  .demo1Img{
    background: #000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: clip-path 0.4s;
    &:hover{
      clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
  }
}

/* 图片裁剪：睁眼效果 */
.css6 {
  .demo{
    background: #000;
    clip-path: ellipse(49% 2% at 50% 50%);
    &:hover{
      animation: wike 1.5s linear forwards;
    }
  }
}

/* 图片裁剪：右滑效果 */
.css7{
  .main{
    width: calc(100% - 200px);
  }
  .demo{
    position: relative;
    height: 100%;
    .demoImg{
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.8s;
    }
    .demo2Img{
      clip-path: polygon(-30% 0%, -30% 0%, -30% 50%, -30% 100%, -30% 100%);
    }
    &:hover .demo2Img{
      clip-path: polygon(0% 0%, 100% 0%, 130% 50%, 100% 100%, 0% 100%);
    }
  }
}

/* 冲电动画 */
.css8{
  .main{
    width: calc(100% - 200px);
    --direc: 0deg;
    position: relative;
    .circleContainer{
      &::before{
        content: '';
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0px;
        left: 50%;
        background:#458f52;
        border-radius: 49% 38% 63% 50%/45%;
        transform:translate(-50%, 0px) rotateZ(var(--direc));
        animation: spin 10s linear infinite;
        filter: hue-rotate(var(--direc)) contrast(15) blur(2px);
      }
      &::after{
        content: '';
        width: 190px;
        height: 190px;
        position: absolute;
        background: #000;
        top: 10px;
        left: 50%;
        transform: translate(-50%, 0%);
        border-radius: 50%;
        filter: blur(2px);
      }
    }

    .circleContainerUl{
      list-style: none;
      .circleContainerLi::before{
        content: "";
        // padding: 10px;
        background: #000;
        display: inline-block;
        // color: #000;
        margin-left: 10px;
      }
    }
  }
}

/* 3d环绕滚动 */
.css10{
  .main{
    width: 100%;
    height: 350px;
    position: relative;
    .encircle{
      width: 100px;
      height: 100px;
      background-color: #0000ff;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 50px;
      position: absolute;
      top: 0px;
      left: 0px;
      &:hover{
        animation-play-state: paused;
      }
    }

    .encircle:nth-child(1){
      animation: encircleX 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
        encircleY 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }

    .encircle:nth-child(2){
      animation: encircleX 12s cubic-bezier(0.36, 0, 0.64, 1) -10.8s infinite alternate,
        encircleY 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
    }

    .encircle:nth-child(3){
      animation: encircleX 12s cubic-bezier(0.36, 0, 0.64, 1) -15.6s infinite alternate,
        encircleY 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
    }

    .encircle:nth-child(4){
      animation: encircleX 12s cubic-bezier(0.36, 0, 0.64, 1) -20.4s infinite alternate,
        encircleY 12s cubic-bezier(0.36, 0, 0.64, 1) -14.4s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -14.4s infinite alternate;
    }

    .encircle:nth-child(5){
      animation: encircleX 12s cubic-bezier(0.36, 0, 0.64, 1) -25.2s infinite alternate,
        encircleY 12s cubic-bezier(0.36, 0, 0.64, 1) -19.2s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -19.2s infinite alternate;
    }
  }
}

@keyframes encircleX {
  0% {
    left: 0%;
  }
  100% {
    left: calc(100% - 100px);
  }
}

@keyframes encircleY {
  0% {
    top: 0px;
  }

  100% {
    top: 250px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.7)
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.7)
 }
}